<template>
	<div class="main">
		<div class="container">
			<!-- 排序控制栏 -->
			<div class="sortbar mb20">
				<!-- <a href="#">综合排序</a> <a href="#">价格升序</a> <a href="#">价格降序</a> -->
				<span @click="orderBy('pid desc')" :class="{order: true, 'order-active': orderByExp == 'pid desc' }">默认排序</span>
				<span @click="orderBy('price asc')" :class="{order: true, 'order-active': orderByExp == 'price asc' }">价格升序</span>
				<span @click="orderBy('price desc')" :class="{order: true, 'order-active': orderByExp == 'price desc' }">价格降序</span>
				<input v-model="priceLow" type="number" placeholder="价格" class="price-input">
				<span>
					- </span> <input v-model="priceHigh" type="number" placeholder="价格" class="price-input">
				<button v-on:click="loadData" class="btn-ok">确定</button>
			</div>
			<!-- 商品列表区 -->
			<div class="module mb20">
				<ul id="product_list">
					<!-- 里面的数据这样渲染: -->
					<li @click="details(pro.pid)" v-for="pro in searchResult.data" :key="pro.pid">
						<img :src="pro.cover">
						<p>{{pro.title}}</p>
						<p>{{pro.sellPoint}}</p>
						<p>{{pro.price}}</p>
					</li>
				</ul>
			</div>
			<!-- 分页区 -->
			<div class="block">
				<el-pagination :total="searchResult.totalRows" :page-count="pageCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[8, 16, 32, 64]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				q: '',
				orderByExp: 'pid desc',
				priceLow: '',
				priceHigh: '',
				page: 1,
				limit: 8,
				searchResult: {
					totalRows: 0,
					data: [{
					}]
				}
			}
		},
		created() {
			this.q = this.$route.query.q;
			if (!this.q) this.q = '';
			this.loadData();
		},
		computed:{
			pageCount(){
				return Math.ceil(this.searchResult.totalRows/this.limit);
			}
		},
		methods: {
			loadData() {
				this.axios.get('/product/list', {
					params: {
						q: this.q,
						orderByExp: this.orderByExp,
						priceLow: this.priceLow,
						priceHigh: this.priceHigh,
						page: this.page,
						limit: this.limit
					}
				}).then(response => {
					this.searchResult = response.data.data;
				})
			},
			orderBy(exp) {
				this.orderByExp = exp;
				this.loadData();
			},
			handleSizeChange(val) {
				this.axios.get('/product/list', {
					params: {
						q: this.q,
						orderByExp: this.orderByExp,
						priceLow: this.priceLow,
						priceHigh: this.priceHigh,
						page: this.page,
						limit: val
					}
				}).then(response => {
					this.searchResult = response.data.data;
					
				})
			},
			handleCurrentChange(val) {
				this.axios.get('/product/list', {
					params: {
						q: this.q,
						orderByExp: this.orderByExp,
						priceLow: this.priceLow,
						priceHigh: this.priceHigh,
						page: val,
						limit: this.limit
					}
				}).then(response => {
					this.searchResult = response.data.data;
				})
			},
			details(pid){
				this.$router.push({
					name:'Details',
					query:{
						pid: pid
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.sortbar {
		display: flex;
		align-items: center;
	}

	.sortbar * {
		margin-right: 10px;
	}

	.price-input {
		text-align: center;
		width: 100px;
		border: 1px solid #CCCCCC;
		height: 34px;
		padding: 0px 10px;
	}

	.price-input::-webkit-outer-spin-button,
	.price-input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}

	.btn-ok {
		background-color: #5D84E3;
		color: #FFFFFF;
		border: none;
		height: 34px;
		width: 80px;
	}

	.pagination {
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.pagination>* {
		margin-left: 10px;
	}

	.pagination ul {
		display: flex;
	}

	.pagination ul li a {
		background-color: #FFFFFF;
		border: 1px solid #CCCCCC;
		border-left: none;
		width: 31px;
		height: 31px;
		/* 变成块级之后, width, height就有效了 */
		display: block;
		text-align: center;
		line-height: 31px;
	}

	.pagination ul li a:hover {
		background-color: #5D84E3;
		color: #FFFFFF;
	}

	.page-input {
		width: 80px;
		text-align: center;
	}

	.h31 {
		height: 31px;
	}

	.order {
		cursor: pointer;
	}

	.order-active {
		color: #0000FF;
	}
</style>
